const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin')//text就指非js的一些东西单独打包。比如css就别写在bundle.js里了，bundle.js太大不利于浏览器缓存。


const isDev = process.env.NODE_ENV === 'development'//判断isDev是否是true
//package.json中的NODE_ENV=xxx环境变量都是存在process.env这个对象里面的。

const config = {
  target:'web',    //这是个全局设置，因为是运行在浏览器中的前端项目，webpack的编译目标是web平台。
  entry:  path.join(__dirname,'src/index.js'),
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
  {
    test: /\.jsx$/,
    loader: 'babel-loader'
  },
      {
        test: /\.(jpg|gif|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4000,
              name: '[name]-aaa.[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({//用vue和react这些框架的时候，就得用这个plugin
      'process.env':{
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),//他是给我们webpack在编译的过程中以及页面中我们自己写的js代码去判断这个环境时，都可以去调用process.env.NODE_ENV进行判断
//即这里定义了，我们写的js代码里是可以引用到的。还有就是vue和react会根据不同的环境进行区分打包，vue中的dist目录中有不同规格的源代码，比如正式环境不希望去使用开发环境中的错误提醒。webpack在打包的时候也会根据这个变量去选择不同的源代码版本打包进去。
    new HTMLPlugin()
  ]
}

//这个配置文件是同时用在正式环境和开发环境的，我们这里的配置是要根据不同的环境去做一些判断的。就是在package.json中的scripts中设置环境变量。

if (isDev) {
  config.module.rules.push(
    {
      test: /\.styl/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader:'postcss-loader',
          options:{
            sourceMap: true,
    //postcss-loader自己也会生成source-map，但如果前面（stylus）已经生成了，postcss-loader会自动帮我们使用前面的source-map来用的。这样编译效率会快一些
          }
        },
        'stylus-loader'//stylus-loader会自动生成source-map
      ]
    }
  )
  config.devtool = '#cheap-module-eval-source-map',//webpack提供的源码映射功能，官方推荐这个配置，效率和准确性都比较高。
  config.devServer = {
    port: 8000,
    host: '0.0.0.0', //0.0.0.0的好处是既可以通过127.0.0.1 localhost进行访问，也可以用本机的内网ip进行访问。因为若直接设置成localhost，通过ip是访问不了的。用ip访问的好处是我们可以在别人的电脑上也访问这台电脑。或者调试手机页面的时候，可以用手机去连接我们的电脑去访问。
    overlay:{
      errors: true //webpack在编译过程中有任何的错误，我们都让他显示在网页上面，这样容易定位错误。
    },
    // open: true, //启动webpack-dev-server的时候自动打开浏览器
  //   historyFallback: {
  // //单页应用会做很多前端路由，我们的页面请求进来的地址不一定就是默认的index.html，所以能帮我们把devServer不理解的地址，
  // //没有做映射的地址都映射到一个入口index.html上边去。
  //   },
    hot: true//单页应用页面有很多数据，一改代码整个页面都刷新了，数据就都没了，还得重新操作一遍数据才会回来。
    //hot功能就是改了某个组件的代码，指重新渲染当前组件，不会整个页面都重新加载。
  }
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),//实现上面hot:true组件单独刷新的功能
    new webpack.NoEmitOnErrorsPlugin()//不太重要，就是减少没用信息的展示
  )
}else{
  config.entry = {
    app: path.join(__dirname,'src/index.js'),
    vendor:['vue']
  }
  config.output.filename='[name].[chunkhash:8].js'//此处一定是chunkhash,因为用hash时app和vendor的hash码是一样的了,这样每次业务代码更新,vendor也会更新,也就没有了意义.
  config.module.rules.push(
    {
      test: /\.styl/,
      use: ExtractPlugin.extract({
        fallback:'style-loader',
        use:[
              'css-loader',
              {
                loader:'postcss-loader',
                options:{
                  sourceMap: true,
          //postcss-loader自己也会生成source-map，但如果前面（stylus）已经生成了，postcss-loader会自动帮我们使用前面的source-map来用的。这样编译效率会快一些
                }
              },
              'stylus-loader'//stylus-loader会自动生成source-map
        ]
      })
    }
  )
  config.plugins.push(
    new ExtractPlugin('styles.[contentHash:8].css'),
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name:'runtime'
    })
  )
}
module.exports = config